<template>
  <div class="addSavingsPlan">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner fixedBanner">
        <van-nav-bar fixed>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <div class="banner-title" style="font-size: 20px;">定额存钱法</div>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 介绍 -->
      <div class="savingsPlan-introduce panel">
        <div class="savingsPlan-title">
          <div class="panel-title-icon"></div>
          <div>介绍</div>
        </div>
        <div class="savingsPlan-introduce-text">
          每次存入固定金额，存N日期后查看该账户（可以是余额宝之类的）。届时，不需要钱的话，继续续存定额存单或其他理财产品。<br><br>
          优点：利率不错，收益稳定；比如定期每月都有一张存单到期，资金比较灵活，需要用钱的时候好周转。<br><br>
          适用于：各类人群，可以根据自己的收入设定月存款金额
        </div>
      </div>
      <!-- 存钱信息 -->
      <div class="savingsPlan-info panel">
        <div class="savingsPlan-title">
          <div class="panel-title-icon"></div>
          <div>存钱信息</div>
        </div>
        <div class="savingsPlan-info-main">
          <div class="savingsPlan-info-main-t">
            <div class="savingsPlan-icon">🤓</div>
            <div class="savingsPlan-info-text">
              <div class="savingsPlan-info-name">{{ spName != '' ? spName : '-' }}</div>
              <div class="savingsPlan-info-notes">{{ spNotes != '' ? spNotes : '-' }}</div>
            </div>
          </div>
          <div class="savingsPlan-main-input">
            <van-cell-group inset>
              <van-field v-model="spName" placeholder="名称(最多15字符)" maxlength="15" />
            </van-cell-group>
          </div>
          <div class="savingsPlan-main-input">
            <van-cell-group inset>
              <van-field v-model="spNotes" placeholder="备注(最多150字符)" maxlength="15" />
            </van-cell-group>
          </div>
        </div>
      </div>
      <!-- 金额 -->
      <div class="savingsPlan-amount panel">
        <div class="savingsPlan-title">
          <div class="panel-title-icon"></div>
          <div>金额</div>
        </div>
        <div class="savingsPlan-amount-main">
          <div class="savingsPlan-main-input">
            <van-cell-group inset>
              <van-field v-model="spTotalVal" type="number" placeholder="起始金额(默认100)" maxlength="15" clearable
                clear-trigger="always" />
            </van-cell-group>
          </div>
        </div>
      </div>
      <!-- 存钱任务 -->
      <div class="savingsPlan-task panel">
        <div class="savingsPlan-title">
          <div class="panel-title-icon"></div>
          <div>存钱任务</div>
        </div>
        <!-- 重复周期 -->
        <div class="savingsPlan-task-main">
          <div class="savingsPlan-task-info">
            <div class="savingsPlan-task-icon">
              <van-icon name="todo-list-o" size="30" color="gray" />
            </div>
            <div class="savingsPlan-task-text">
              <div class="savingsPlan-task-title">重复周期</div>
              <div class="savingsPlan-task-tag">根据一定规则存钱</div>
            </div>
          </div>
          <div class="savingsPlan-task-right">
            <div class="savingsPlan-task-right-text">每一天</div>
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 开始时间 -->
        <div class="savingsPlan-task-main">
          <div class="savingsPlan-task-info">
            <div class="savingsPlan-task-icon">
              <van-icon name="play-circle-o" size="30" color="gray" />
            </div>
            <div class="savingsPlan-task-text">
              <div class="savingsPlan-task-title">开始时间</div>
              <div class="savingsPlan-task-tag">2025年1月23日</div>
            </div>
          </div>
          <div class="savingsPlan-task-right">
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 结束方式 -->
        <div class="savingsPlan-task-main">
          <div class="savingsPlan-task-info">
            <div class="savingsPlan-task-icon">
              <van-icon name="stop-circle-o" size="30" color="gray" />
            </div>
            <div class="savingsPlan-task-text">
              <div class="savingsPlan-task-title">结束方式</div>
              <div class="savingsPlan-task-tag">根据此规则结束此任务</div>
            </div>
          </div>
          <div class="savingsPlan-task-right">
            <div class="savingsPlan-task-right-text">1次结束</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="main-b">
      <div class="fixedBtn" @click="saveSavingPlan()">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="AddSavingsPlan">
// 添加存钱计划
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

let spName = ref('') // 存钱计划 名称
let spNotes = ref('') // 存钱计划 备注
let spTotal = ref(100) // 存钱计划 金额

let spTotalVal = computed({  // 存钱计划 金额-显示
  get() {
    return spTotal.value.toFixed(2)
  },
  set(value) {
    spTotal.value = parseFloat(value)
  }
})

// 返回上一页
function back() {
  router.go(-1)
}

// 保存存钱法
function saveSavingPlan() {
  console.log('保存存钱计划')
}
</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.addSavingsPlan {
  min-height: 100vh;
  padding-bottom: 100px;
}

.main-t {
  margin-bottom: 1.8rem;
}

.main-c {
  font-size: 30px;
  margin: @gabelMargin;

  .savingsPlan-title {
    display: flex;
    align-items: center;
  }

  .savingsPlan-introduce {
    .savingsPlan-introduce-text {
      color: @garyFontColor;
      font-size: 25px;
      margin-top: 20px;
      padding: 0 20px;
    }
  }

  .savingsPlan-info {
    .savingsPlan-info-main {
      margin: 20px 0;

      .savingsPlan-info-main-t {
        display: flex;
        align-items: center;

        .savingsPlan-info-notes {
          font-size: 25px;
          color: gray;
        }
      }
    }
  }

  .savingsPlan-task {
    .savingsPlan-task-main {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .savingsPlan-task-info {
        display: flex;
        align-items: center;

        .savingsPlan-task-icon {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: @grayBgColor;
        }

        .savingsPlan-task-text {
          .savingsPlan-task-tag {
            font-size: 25px;
            color: gray;
          }
        }
      }

      .savingsPlan-task-right {
        display: flex;
        align-items: center;
        color: gray;

        .savingsPlan-task-right-text {
          font-size: 25px;
        }
      }
    }
  }
}

.savingsPlan-main-input {
  margin: 25px -15px;
}

.van-cell {
  background-color: @grayBgColor;
  border-radius: 50px;

  ::placeholder {
    color: gray;
  }
}
</style>